<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <el-button type="primary" @click="openDialog">新增</el-button>
            </div>
        </div>
        <CustomTable class="mt-4" :data="ruleList">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="ruleName" label="规则名称" />
            <el-table-column label="商品图片">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.goodsImg" fit="cover" />

                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" />
            <el-table-column prop="goodsNum" label="商品数量" />
            <el-table-column prop="goodsPrice" label="商品价格" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="结束时间" />

            <el-table-column prop="signNum" label="报名人数" />
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    {{ getStatusStr(row.status) }}
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="创建人" />
            <el-table-column label="操作" width="240px">
                <template #default="{ row }">
                    <el-button text type="primary" @click="openEdit(row)">编辑</el-button>
                    <el-button text type="primary" @click="submitOrder(row)">下单</el-button>
                    <el-button text type="danger" @click="deleteRule(row)">下架</el-button>
                </template>
            </el-table-column>
        </CustomTable>
        <CustomDialog v-model:show="ruleDialog" :title="(isEdit ? '修改' : '新增') + '团购规则'" width="600px"
            @cancel="cancelDialog" @confirm="submitForm">
            <el-form ref="formRef" :model="ruleForm" label-width="auto">
                <el-form-item label="规则名称" prop="ruleName">
                    <el-input v-model="ruleForm.ruleName"></el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="times">
                    <el-date-picker v-model="ruleForm.times" type="daterange" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="选择商品" prop="goodsId">
                    <el-select v-model="ruleForm.goodsId">
                        <el-option v-for="item in goodsList" :value="item.id" :label="item.goodsName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品数量" prop="goodsNum">
                    <el-input-number v-model="ruleForm.goodsNum"></el-input-number>
                </el-form-item>
                <div class="flex">
                    <div>
                        <el-form-item label="参团人数" prop="peopleNum">
                            <el-input-number v-model="ruleForm.detail[0].peopleNum"></el-input-number>
                        </el-form-item>
                        <el-form-item label="折扣" prop="discount">
                            <el-input-number v-model="ruleForm.detail[0].discount"></el-input-number>
                        </el-form-item>
                    </div>
                    <div class="ml-4">
                        <el-form-item label="参团人数" prop="peopleNum">
                            <el-input-number v-model="ruleForm.detail[1].peopleNum"></el-input-number>
                        </el-form-item>
                        <el-form-item label="折扣" prop="discount">
                            <el-input-number v-model="ruleForm.detail[1].discount"></el-input-number>
                        </el-form-item>
                    </div>
                </div>


            </el-form>
        </CustomDialog>
    </div>
</template>

<script setup lang="ts">
import { addGroupRule, delGroupRule, getGroupRuleList, updateGroupRule } from '@/apis/group'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import CustomTable from '@/components/CustomTable.vue'

import CustomDialog from '@/components/CustomDialog.vue'
import { getGoodsList } from '@/apis/goods'
import { addRuleOrder } from '@/apis/order'

const ruleDialog = ref(false)
const ruleList = ref([])
const ruleForm = reactive({
    goodsId: null,
    ruleName: "",
    times: [],
    goodsNum: 0,
    detail: [{
        peopleNum: 0,
        discount: 0
    }, {
        peopleNum: 0,
        discount: 0
    }]

})

const getRules = async () => {
    const res = await getGroupRuleList({
        pageNum: 1,
        pageSize: 1000,
    })
    ruleList.value = res.list
}
const isEdit = ref(false)
const openDialog = () => {
    ruleDialog.value = true
}
const cancelDialog = () => {
    ruleDialog.value = false
}
const editTarget = ref()
const openEdit = (row) => {
    isEdit.value = true
    ruleDialog.value = true
    Object.assign(ruleForm, {
        goodsId: row.goodsId,
        ruleName: row.ruleName,
        times: [row.startTime, row.endTime],
        goodsNum: row.goodsNum,
        peopleNum: 0,
        discount: 0
    })
    editTarget.value = row
}
const submitOrder = async (row) => {
    await addRuleOrder(row.id)
    ElMessage.success("下单成功")

}
const deleteRule = async (row) => {
    await delGroupRule(row.id)
    ElMessage.success("下架成功")
    getRules()
}
const submitForm = async () => {
    ruleDialog.value = false
    if (isEdit.value) {
        await updateGroupRule({
            id: editTarget.value.id,
            goodsId: ruleForm.goodsId,
            ruleName: ruleForm.ruleName,
            startTime: ruleForm.times[0],
            endTime: ruleForm.times[1],
            goodsNum: ruleForm.goodsNum,
            details: [
                {
                    peopleNum: ruleForm.detail[0].peopleNum,
                    discount: ruleForm.detail[0].discount
                },
                {
                    peopleNum: ruleForm.detail[1].peopleNum,
                    discount: ruleForm.detail[1].discount
                }
            ]
        })
        ElMessage.success("编辑成功")

    } else {
        await addGroupRule({
            goodsId: ruleForm.goodsId,
            ruleName: ruleForm.ruleName,
            startTime: ruleForm.times[0],
            endTime: ruleForm.times[1],
            goodsNum: ruleForm.goodsNum,
            details: [
                {
                    peopleNum: ruleForm.detail[0].peopleNum,
                    discount: ruleForm.detail[0].discount
                },
                {
                    peopleNum: ruleForm.detail[1].peopleNum,
                    discount: ruleForm.detail[1].discount
                }
            ]
        })
        ElMessage.success("添加成功")
    }

    getRules()

}

const getStatusStr = (val) => {
    // 状态1未开始2进行中3已结束
    switch (val) {
        case 1:
            return '未开始'
        case 2:
            return '进行中'
        case 3:
            return '已结束'
        default:
            break;
    }
}
const goodsList = ref([])
const getGoods = async () => {
    const res = await getGoodsList({
        pageNum: 1,
        pageSize: 1000,
    })
    goodsList.value = res.list
}

onMounted(() => {
    getGoods()
    getRules()
})
</script>

<style scoped></style>